<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'fangsong';
                font-weight: bold;
            }
            body {
                background-color: rgb(241, 241, 241);
            }
            .btn {
                width: 120px;
                height: 50px;
                margin: 20px auto;
                display: block;
                cursor: pointer;
                outline: none;
                border: none;
                border-radius: 6px;
                background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.1), white);
                box-shadow: -4px -4px 8px -2px white, 4px 4px 8px -2px rgba(0, 0, 0, 0.15);
            }
            .btn:active {
                box-shadow: inset -4px -4px 8px -2px white, inset 4px 4px 8px -2px rgba(0, 0, 0, 0.15);
                /* box-shadow: 外阴影，拟态化效果；box-shadow: inset 内阴影； */
            }
            .container {
                display: flex;
                justify-content: center;
                flex-wrap: wrap; /* 换行 */
                align-content: space-around;
            }
            .item {
                width: 20%;
                height: 100px;
                border: 1px solid rgb(253, 253, 253);
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                text-shadow: 0 0 1px white; /* 文字阴影 */
            }
        </style>
    </head>
    <body>
        <button class="btn">🧡 换一换 😀</button>
        <div class="container"></div>
        <script>
            // 先创建子盒子，每个子盒子为一种颜色
            var container = document.querySelector('.container');
            // 新建 90个子盒子
            for (let i = 1; i < 91; i++) {
                let item = document.createElement('div');
                // 新增一个类选择器为item
                item.classList.add('item');
                // .container添加子元素
                container.appendChild(item);
            }

            // 定义一个函数，将返回一个16进制的颜色的值
            function randomColor() {
                // 16进制的颜色的值字符范围为以下
                let code = '0123456789abcdef';
                let color = '';
                // 16进制的颜色长度为6位
                for (let i = 0; i < 6; i++) {
                    // 获取一个0到code长度的随机值
                    let ran = Math.floor(Math.random() * code.length);
                    // 给color拼接上code的第ran个字符
                    color += code.substring(ran, ran + 1);
                }
                return '#' + color;
            }
            // Math.floor() 返回小于或等于一个给定数字的最大整数。
            // substring() 方法用于提取字符串中介于两个指定下标之间的字符。

            // 获取全部颜色盒子
            var items = document.querySelectorAll('.item');
            function getColor() {
                items.forEach((temp) => {
                    // 得一个16进制的颜色的值
                    let color = randomColor();
                    // 设背景色
                    temp.style.backgroundColor = color;
                    // 显示文字
                    temp.innerHTML = color;
                });
            }
            getColor();

            // 给换一换按钮绑定点击事件
            var btn = document.querySelector('.btn');
            btn.addEventListener('click', getColor);
        </script>
    </body>
</html>
